<template>
  <header>
    <div class="header-t w-1200">
      <div class="logo">
        <nuxt-link to="/">
          <img :src="siteConfig.siteLogo" alt="logo" />
        </nuxt-link>
      </div>
      <div class="nav-menu">
        <nuxt-link to="/">首页</nuxt-link>
        <nuxt-link to="/sharecircle">友圈</nuxt-link>
        <nuxt-link to="/tool">工具箱</nuxt-link>
        <a href="https://mind.zdxblog.cn" target="_blank">思维导图<em>外</em></a>
        <nuxt-link v-if="false" to="/tutorial">教程</nuxt-link>
        <nuxt-link v-if="false" to="/question">刷题</nuxt-link>
        <nuxt-link to="/feedback">反馈</nuxt-link>
      </div>
      <div class="right-operate">
        <div class="search-model">
          <div class="s-btn" @click="vagueSearch">
            <a-icon type="search" />
          </div>
          <input
            v-model="searchValue"
            :maxlength="32"
            type="text"
            placeholder="搜索文章/用户"
            class="s-input"
            @blur="historyVisible = false"
            @focus="focusSearchInput"
            @keypress.enter="vagueSearch"
          />
          <div
            v-show="historyVisible && historyList.length"
            class="history-search-list-modal"
          >
            <div class="history-title">
              <p>搜索历史</p>
              <a-button type="link" @mousedown="clearHistorySearch"
                >清除</a-button
              >
            </div>
            <div class="list">
              <p
                v-for="item in historyList"
                :key="item"
                @mousedown="historySearch(item)"
              >{{ item }}</p>
            </div>
          </div>
        </div>
        <a-popover placement="bottom">
          <div class="auth-create-list" slot="content">
            <div class="list-item" @click="authCreateResource('/writecenter')">
              <img src="~/assets/images/w-article.svg" alt="">
              <span>写文章</span>
            </div>
            <div class="list-item" @click="authCreateResource('/xmind')">
              <img src="~/assets/images/w-xmind.svg" alt="">
              <span>绘制思维导图</span>
            </div>
          </div>
          <a-button
            type="primary"
            class="create-button">
            创作中心 <a-icon type="caret-down" />
          </a-button >
        </a-popover>
        <a-popover v-if="userInfo" trigger="hover" placement="bottom">
          <a-badge
            dot
            :count="notifyCount.allCount || notifyCount.imCount || 0"
            style="margin-right: 20px; cursor: pointer"
          >
            <a-icon type="bell" style="font-size: 18px;" />
          </a-badge>
          <div slot="content" class="cover-image-popover">
            <div class="small-icon">
              <p>
                <nuxt-link to="/notification"><i class="ri-message-ai-3-line"></i>评论消息</nuxt-link>
                <em v-if="notifyCount.commentCount">{{ notifyCount.commentCount }}</em>
              </p>
              <p>
                <nuxt-link to="/notification/agree"><i class="ri-user-heart-line"></i>点赞消息</nuxt-link>
                <em v-if="notifyCount.agreeCount">{{ notifyCount.agreeCount }}</em>
              </p>
              <p>
                <nuxt-link to="/notification/focus"><i class="ri-user-follow-line"></i>关注消息</nuxt-link>
                <em v-if="notifyCount.focusCount">{{  notifyCount.focusCount }}</em>
              </p>
              <p>
                <nuxt-link to="/notification/collect"><i class="ri-user-star-line"></i>收藏消息</nuxt-link>
                <em v-if="notifyCount.collectCount">{{ notifyCount.collectCount }}</em>
              </p>
              <p>
                <nuxt-link to="/notification/im"><i class="ri-mail-open-line"></i>私信</nuxt-link>
                <em v-if="notifyCount.imCount">{{  notifyCount.imCount }}</em>
              </p>
              <p>
                <nuxt-link to="/notification/notice"><i class="ri-discuss-line"></i>系统消息</nuxt-link>
                <em v-if="notifyCount.noticeCount">{{  notifyCount.noticeCount }}</em>
              </p>
            </div>
          </div>
        </a-popover>
        <a-button
          v-if="!userInfo"
          type="dashed"
          @click="$store.commit('UPDATE_LOGIN_VISIBLE', true)"
          >登录</a-button
        >
        <a-popover v-else trigger="hover" placement="bottom">
          <div slot="content" class="cover-image-popover">
            <div>
              <p>
                <nuxt-link to="/writecenter" target="_blank"><i class="ri-article-line"></i>写文章</nuxt-link>
              </p>
            </div>
            <div>
              <p>
                <nuxt-link to="/setting/profile"><i class="ri-edit-2-line"></i>修改资料</nuxt-link>
              </p>
              <p>
                <nuxt-link :to="`/user/${userInfo.id}`"><i class="ri-user-3-line"></i>我的主页</nuxt-link>
              </p>
              <p>
                <nuxt-link :to="`/user/${userInfo.id}/collect`"><i class="ri-user-star-line"></i>我的收藏</nuxt-link>
              </p>
              <p>
                <nuxt-link :to="`/user/${userInfo.id}/focus`"><i class="ri-user-follow-line"></i>我的关注</nuxt-link>
              </p>
              <p>
                <nuxt-link :to="`/user/${userInfo.id}/agree`"><i class="ri-user-heart-line"></i>我的点赞</nuxt-link>
              </p>
              <p>
                <nuxt-link :to="`/browse-history`"><i class="ri-footprint-line" style="position: relative; top: 1px"></i>浏览记录</nuxt-link>
              </p>
            </div>
            <div>
              <p class="pad-ing" @click="userLogout">
                <i class="ri-logout-circle-line"></i>退出登录
              </p>
            </div>
          </div>
          <HeadAvatar
            :width="36"
            :height="36"
            style="cursor: pointer"
            :img="userInfo.avatar"
          />
        </a-popover>
      </div>
    </div>
  </header>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'HeaderComp',
  props: {
    siteConfig: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      searchValue: '',
      historyVisible: false,
      historyList: []
    }
  },
  created () {
    if (this.userInfo) {
      this.getNotifyCount()
    }
  },

  methods: {
    focusSearchInput () {
      const historyList = localStorage.getItem('SEARCH_HISTORY')
      if (!this.searchValue && historyList) {
        this.historyVisible = true
        this.historyList = JSON.parse(historyList)
      }
    },

    historySearch (keyword) {
      this.searchValue = keyword
      this.vagueSearch()
    },

    clearHistorySearch () {
      localStorage.removeItem('SEARCH_HISTORY')
      this.historyList = []
    },

    authCreateResource (path) {
      if (!this.userInfo) {
        return this.$store.commit('UPDATE_LOGIN_VISIBLE', true)
      }
      if (path === '/writecenter') {
        const routerObject = this.$router.resolve({ path: '/writecenter' })
        window.open(routerObject.href, '_blank')
      } else if (path === '/xmind') {
        const XMIND_URL = 'https://mind.zdxblog.cn'
        window.open(XMIND_URL)
      }
    },

    userLogout () {
      this.$cookies.remove('ACCESS_TOKEN')
      this.$store.commit('UPDATE_USER_INFO', '')
      if (this.$router.currentRoute.fullPath !== '/') {
        this.$router.replace('/', () => {
          location.reload()
        })
        return
      }
      location.reload()
    },

    async getNotifyCount () {
      try {
        const { data } = await this.$axios.get('/gimishare/api/v1/messages/count')
        this.$store.commit('UPDATE_NOTIFY_COUNT', data)
      } catch (error) {}
    },

    vagueSearch () {
      if (this.searchValue) {
        let searchHistory = localStorage.getItem('SEARCH_HISTORY')
          ? JSON.parse(localStorage.getItem('SEARCH_HISTORY'))
          : null
        if (searchHistory) {
          searchHistory.unshift(this.searchValue)
        } else {
          searchHistory = [this.searchValue]
        }
        searchHistory = [...new Set(searchHistory)].slice(0, 5)
        localStorage.setItem('SEARCH_HISTORY', JSON.stringify(searchHistory))
        this.$router.push({
          path: '/search',
          query: {
            value: this.searchValue,
            type: '1'
          }
        })
      }
    }
  },

  computed: {
    ...mapState({
      userInfo: state => state.userInfo,
      notifyCount: state => state.notifyCount
    })
  },

  watch: {
    searchValue (v) {
      if (v) {
        this.historyVisible = false
      } else {
        this.focusSearchInput()
      }
    }
  }
}
</script>
<style lang="less" scoped>
 header {
  height: 60px;
  position: sticky;
  top: 0;
  width: 100%;
  left: 0;
  border-bottom: 1px solid #f1f1f1;
  z-index: 1000;
  background: #fff;
  .header-t {
    align-items: center;
    display: flex;
    height: 100%;
    .logo {
      display: flex;
      align-items: center;
      height: 100%;
      img {
        height: 42px;
        display: block;
        user-select: none;
      }
    }
    .nav-menu {
      flex: 1;
      width: 0;
      padding: 0 20px;
      a {
        color: #515767;
        margin-right: 20px;
        letter-spacing: 1px;
        position: relative;
        &.nuxt-link-exact-active {
          color: var(--primary-color);
        }
        em {
          position: absolute;
          font-family: ShangShouSaTi;
          color: var(--primary-color);
          font-size: 10px;
          top: -8px;
          right: -8px;
        }
      }
    }
    .right-operate {
      display: flex;
      align-items: center;
      .search-model {
        position: relative;
        .s-input {
          width: 256px;
          height: 36px;
          outline: none;
          border: 1px solid #e3e3e3;
          border-radius: 4px;
          padding: 0 64px 0 12px;
          box-sizing: border-box;
          font-size: 12px;
          transition: 0.3s;
          color: #000;
          &:hover {
            border-color: #999;
          }
          &:focus {
            border-color: #42b983;
            width: 300px;
          }
        }
        .s-btn {
          position: absolute;
          top: 50%;
          right: 4px;
          top: 4px;
          background: var(--primary-color);
          width: 34px;
          text-align: center;
          line-height: 28px;
          border-radius: 3px;
          cursor: pointer;
          transition: 0.2s;
          &:active {
            opacity: 0.8;
          }
          i {
            color: #fff;
            font-size: 13px;
          }
        }
        .history-search-list-modal {
          position: absolute;
          left: 0;
          right: 0;
          top: 38px;
          border-radius: 2px;
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
          border: 1px solid #f1f1f1;
          background-color: #fff;
          .history-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 12px;
            border-bottom: 1px solid #f1f1f1;
            p {
              color: #869aab;
              font-size: 12px;
            }
            ::v-deep .ant-btn-link {
              padding: 0;
              span {
                color: var(--primary-color);
                font-size: 12px;
              }
            }
          }
          .list {
            p {
              line-height: 32px;
              padding: 0 12px;
              font-size: 12px;
              color: #4c4c4c;
              cursor: pointer;
              &:hover {
                background-color: #eff2f5;
              }
            }
          }
        }
      }
      .create-button {
        margin: 0 20px;
        padding-right: 12px;
        i {
          position: relative;
          transition: .2s;
          transform-origin: 50% 40%;
          top: 1px;
        }
        &:hover {
          i {
            transform: rotate(-180deg);
          }
        }
      }
    }
  }
}
</style>
